<script setup>
import { ref, onMounted } from 'vue'
import { onReachBottom, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import { getVideoList } from '@/apis/apis.js'
const page = ref(0)
const isLoading = ref(false)
const isFinished = ref(false)
const videoList = ref([])
const currentItem = ref(null)
const handlePlay = (item, index) => {
  if (currentItem.value !== null) {
    currentItem.value.controls = false
    currentItem.value.play_but = true
    const videoContext = uni.createVideoContext(currentItem.value._id)
    videoContext.pause()
  }
  currentItem.value = item
  currentItem.value.controls = true
  currentItem.value.play_but = false
  const videoContext = uni.createVideoContext(currentItem.value._id)
  videoContext.play()
}
onMounted(async () => {
  const res = await getVideoList({
    page: page.value
  })
  videoList.value = [...videoList.value, ...res.data]
  if (res.data.length < 5) {
    isFinished.value = true
  }
})
onReachBottom(async () => {
  if (isFinished.value) return
  if (!isLoading.value) {
    isLoading.value = true
    page.value++
    const res = await getVideoList({
      page: page.value
    })
    videoList.value = [...videoList.value, ...res.data]
    if (res.data.length < 5) {
      isFinished.value = true
    }
    isLoading.value = false
  }  
})
onPullDownRefresh(async () => {
  page.value = 0
  isLoading.value = false
  isFinished.value = false
  videoList.value = []
  const res = await getVideoList({
    page: page.value
  })
  videoList.value = [...videoList.value, ...res.data]
  if (res.data.length < 5) {
    isFinished.value = true
  }
  uni.stopPullDownRefresh()
})
onShow(() => {
  if (currentItem.value !== null) {
    currentItem.value.controls = false
    currentItem.value.play_but = true
    const videoContext = uni.createVideoContext(currentItem.value._id)
    videoContext.pause()
  }
})
</script>

<template>
  <view class="view">
    <view class="view-item" v-for="(item, index) in videoList" :key="index">
      <video :id="item._id" class="view-item-video" :title="item.video_title" object-fit="cover" :src="item.video_url" :show-center-play-btn="false" :controls="item.controls"></video>
      <view class="view-item-video-mask-title">{{ item.video_title }}</view>
      <image class="view-item-video-mask-image" v-if="item.play_but" src="/static/images/video-bofang.png" mode="aspectFill" @click="handlePlay(item, index)"></image>
      <view class="view-item-up">
        <image class="view-item-up-avatar" :src="item.avatar" mode="aspectFill"></image>
        <view class="view-item-up-name">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-item {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    .view-item-video {
      width: 750rpx;
      height: 450rpx;
    }
    .view-item-video-mask-title {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      color: #fff;
      font-size: 36rpx;
    }
    .view-item-video-mask-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100rpx;
      height: 100rpx;
    }
    .view-item-up {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background-color: #fff;
      .view-item-up-avatar {
        margin-right: 20rpx;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
      }
    }
  }
}
</style>
